<!DOCTYPE html>
  <html xmlns="http://www.w3c.org/1999/xhtml"
        xmlns:h="http://java.sun.com/jsf/html"
        xmlns:p="http://primefaces.org/ui"
        xmlns:ui="http://java.sun.com/jsf/facelets">
   <h:head>
   </h:head>
	
	<h:body>

		<ui:include src="/pages/header.xhtml"/>
        <ui:include src="/pages/menu.xhtml"/>
 <h:form id="register">
			<p:growl id="growl" sticky="true" showDetail="true"/>  
			
			<p:wizard flowListener="#{client.onFlowProcess}"> 
			 
		  <p:tab id="personal" title="Personnel">
		  		      	  
		      <p:panel header="Personal Details">

		        <h:messages errorClass="error"/>
		        <h:panelGrid columns="2">
		           <h:outputText value="Prenom: *" />
		           <h:inputText value="#{client.prenom}" required="true"/>
		           <h:outputText value="Nom: *" />
		           <h:inputText value="#{client.nom}" required="true"/>
		           <h:outputText value="Age: " />
		           <h:inputText value="#{client.age}" />
		        </h:panelGrid>
		        <p:messages id="messages" showDetail="true" autoUpdate="true"/>  
		        <h:panelGrid columns="2" id="matchGrid">                     
		            <h:outputLabel for="pwd1" value="Mot de passe: " />  
		            <p:password id="pwd1" value="#{client.motDePasse}" match="pwd2" label="Password 1" required="true" feedback="true"/>  
		            <h:outputLabel for="pwd2" value="Repeter mot de passe : " />  
		            <p:password id="pwd2" value="#{client.motDePasse}" label="Password 2" required="true"/>  
		        </h:panelGrid> 	        
		      </p:panel>     		        
		  </p:tab> 
		  
		  <p:tab id="address" title="Adresse">
		    <p:panel header="Adress Details">
		       <h:messages errorClass="error"/>
		       <h:panelGrid columns="2" columnClasses="label, value">
		           <h:outputText value="Rue: " />
		           <h:inputText value="#{client.rue}" />
		           <h:outputText value="Code postal: " />
		           <h:inputText value="#{client.codePostal}" />
		           <h:outputText value="Ville: " />
		           <h:inputText value="#{client.ville}" />
		       </h:panelGrid>
		     </p:panel>
		  </p:tab>
		  
		  
		  <p:tab id="contact" title="Contact">
		    <p:panel header="Contact Information">
		       <h:messages errorClass="error"/>
		       <h:panelGrid columns="2">
		           <h:outputText value="Email: *" />
		           <h:inputText value="#{client.adresseMail}" required="true"/>
		           <h:outputText value="Telephone: " />
		           <h:inputText value="#{client.telephone}"/>
		       </h:panelGrid>
		    </p:panel>
		  </p:tab>
		  
		 <p:tab id="confirm" title="Confirmation">
		  <p:panel header="Confirmation">
		            <h:panelGrid id="confirmation" columns="6">
		               <h:outputText value="Prenom " />
		               <h:outputText value="#{client.prenom}"/>
		               <h:outputText value="Nom: " />
		               <h:outputText value="#{client.nom}"/>
		               <h:outputText value="Age: " />
		               <h:outputText value="#{client.age}" />
		               <h:outputText value="Rue: " />
		               <h:outputText value="#{client.rue}" />
		               <h:outputText value="Code postal: " />
		               <h:outputText value="#{client.codePostal}"/>
		               <h:outputText value="Ville: " />
		               <h:outputText value="#{client.ville}"/>
		               <h:outputText value="Email: " />
		               <h:outputText value="#{client.adresseMail}" />
		               <h:outputText value="Telephone " />
		               <h:outputText value="#{client.telephone}"/>
		               <h:outputText />
		               <h:outputText />
		        </h:panelGrid>
		        <p:commandButton value="Valider" actionListener="#{client.save}" />
		        </p:panel>
		     </p:tab>
		   </p:wizard>
		</h:form>
	 <ui:include src="/pages/footer.xhtml"/>
		</h:body>
		</html>